<script lang="ts" setup>
import { useSystemStore } from '@/stores/system'

const systemStore = useSystemStore()

const { time, index, text } = defineProps({
  time: {
    type: String,
    required: true,
    default: ''
  },
  index: {
    type: Number,
    required: true,
    default: 0
  },
  text: {
    type: String,
    required: true,
    default: ''
  }
})

const rightClass =
  'mr-auto ml-2.5 pr-2 use-second-bg use-transitions-shadow-short use-radius-sm use-shadow relative w-1/2'
const leftClass =
  'ml-auto mr-2.5 pl-2 use-second-bg use-transitions-shadow-short use-radius-sm use-shadow relative w-1/2'
</script>

<template>
  <el-container
    :class="systemStore.system.isLt768 ? 'pl-5 relative' : index % 2 === 0 ? leftClass : rightClass"
    direction="vertical"
  >
    <span
      :class="
        'flex gap-1 absolute items-center ' +
        (systemStore.system.isLt768
          ? 'left-3'
          : index % 2 === 0
            ? 'left-0'
            : 'right-0 flex-row-reverse')
      "
    >
      <span class="flex min-w-5 max-w-5 rounded-full h-5 bg-amber-500"></span>
      <span>{{ time }}</span>
    </span>
    <el-container
      :class="
        'mt-6 pt-2 pb-5 ' +
        (systemStore.system.isLt768 ? 'border-l-4' : index % 2 === 0 ? 'border-l-4' : 'border-r-4')
      "
    >
      <DiaryBook :content="text" title="致不易少年" />
    </el-container>
  </el-container>
</template>

<style lang="scss" scoped></style>
